import Vue from 'vue'
import App from './App.vue'
import './styles/index.css'

Vue.config.productionTip = false

Vue.directive('directive',{
  //inserted每当元素插入到dom中时执行
  inserted(el){
    el.style.color = 'blue'
  },
  //update每当数据变化时执行，dom重新渲染之前执行
  update(el,binding){
    el.style.color = binding.value
  },
  //bind只执行一次，dom渲染之前执行，里面可以进行样式操作
  bind(el,binding){
    el.style.color = binding.value
  },
  //unbind只执行一次，dom渲染之后执行
  unbind(el){
    el.style.color = ''
  },
  //componentUpdated每当子组件更新时执行
  componentUpdated(el,binding){
    el.style.color = binding.value
  },
  //beforeUpdate每当dom更新之前执行
  beforeUpdate(el,binding){
    el.style.color = 'green'
  },
  //activated每当keep-alive组件激活时执行
  activated(el,binding){
    el.style.color ='red'
  },
  //deactivated每当keep-alive组件失活时执行
  deactivated(el,binding){
    el.style.color = 'yellow'
  },
  
 
})

new Vue({
  render: h => h(App),
}).$mount('#app')
